<!--
 * @Author: your name
 * @Date: 2021-09-26 15:10:03
 * @LastEditTime: 2021-10-03 17:35:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdatavue\src\views\others\test.vue
-->
<template>
    <div class="listwarp">
        <div v-for="(item, index) in tools" :key="index" class="toolbar_list">
            <Tooltip
                v-for="(item2, index2) in item"
                :key="index2"
                :title="item2.tip"
                placement="bottom"
            >
                <div class="toolbarBox" @click="handleClick(item2)">
                    <svg-icon :icon-class="item2.iconName" size="1.3"></svg-icon>
                </div>
            </Tooltip>
        </div>

        <div class="toolbar_list">
            <Tooltip title="Ctrl+滚轮" placement="bottom">
                <div class="toolbarBox" @click="salecZoom(-1)">
                    <svg-icon icon-class="narrow" size="1.3"></svg-icon>
                </div>
            </Tooltip>
            <Tooltip title="缩放" placement="bottom">
                <div class="toolbarBox zoom">{{ zoomValue }}%</div>
            </Tooltip>
            <Tooltip title="Ctrl+滚轮" placement="bottom">
                <div class="toolbarBox" @click="salecZoom(1)">
                    <svg-icon icon-class="enlarge" size="1.3"></svg-icon>
                </div>
            </Tooltip>
        </div>
        <div v-for="(item, index) in exports" :key="index" class="toolbar_list">
            <Tooltip
                v-for="(item2, index2) in item"
                :key="index2"
                :title="item2.tip"
                placement="bottom"
            >
                <div class="toolbarBox" @click="handleClick(item2)">
                    <svg-icon :icon-class="item2.iconName" size="1.3"></svg-icon>
                </div>
            </Tooltip>
        </div>
        <!-- 背景颜色 -->
        <div class="toolbar_list">
            <Tooltip title="背景颜色" placement="bottom">
                <div class="toolbarBoxs active">
                    <div class="colorsModel" @click="handleColor">
                        <span :style="{ background: colorsValue }"></span>
                    </div>
                    <input
                        ref="colors"
                        v-model="colorsValue"
                        class="colors"
                        type="color"
                        @input="onChangeBgColor"
                        @change="onChangeBgColor"
                    />
                </div>
            </Tooltip>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, toRaw, ref } from 'vue'
import { Button, Tooltip, Input } from 'ant-design-vue'
import { Toolslist, Toolsexport } from './tools'
import type { PropType } from 'vue'

export default defineComponent({
    name: 'Flowechart',
    props: {
        zoomValue: {
            type: [Number, String] as PropType<Number | String>,
            default: () => 1,
        },
    },
    components: {
        Button,
        Tooltip,
        Input,
    },
    emits: {
        allhandleClick: null,
        salecZoom: null,
        ChangeBgColor: null,
    },
    setup(_, { emit }) {
        const colors = ref<HTMLInputElement | null>(null)
        let tools = toRaw(Toolslist)
        let exports = toRaw(Toolsexport)
        let colorsValue = ref()
        colorsValue.value = '#fff'
        const handleClick = (e) => {
            emit('allhandleClick', e)
        }
        const salecZoom = (e) => {
            emit('salecZoom', e)
        }
        // 动态更改颜色
        const onChangeBgColor = (e) => {
            emit('ChangeBgColor', e.target.value)
        }
        // 驱动颜色选择框
        const handleColor = () => {
            colors.value?.click()
        }
        return {
            colors,
            tools,
            exports,
            salecZoom,
            colorsValue,
            handleClick,
            handleColor,
            onChangeBgColor,
        }
    },
})
</script>

<style lang="less" scoped>
.listwarp {
  display: flex;
  padding: 3px 0;
  height: 40px;
  .toolbar_list {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #666;
    .zoom {
      width: 40px;
      background: #e4e4e4 !important;
      font-weight: 100;
      font-size: 12px;
    }
    .colors {
      border: none;
      outline: none;
      padding: 0;
      height: 20px;
      width: 20px;
      visibility: hidden;
      position: absolute;
      z-index: -1;
    }
    .colorsModel {
      height: 20px;
      width: 20px;
      border-radius: 2px;
      overflow: hidden;
      box-sizing: border-box;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      & > span {
        width: 100%;
        height: 100%;
        display: inline-block;
      }
    }

    .toolbarBox {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 3px;
      padding: 0 1px;
      background: transparent;
      border-radius: 3px;
      cursor: pointer;
      &:hover {
        background: #dfdede;
      }
      &.active {
        background: #fff;
        &:hover {
          background: #fff;
        }
      }
    }
    border-right: 1px solid #eee;
  }
}
</style>
